<template>
  <div class="ivt">
    <header>菜品入库管理</header>
    <el-table :data="tableData" border :fit="true">
      <el-table-column prop="order" label="序号" width="100"> </el-table-column>
      <el-table-column prop="code" label="菜品订单编号" />
      <el-table-column prop="time" label="菜品入库时间" />
      <el-table-column prop="type" label="菜品类型" />
      <el-table-column
        prop="sum"
        label="入库总量"
        width="100"
      ></el-table-column>
      <el-table-column prop="past_count" label="已入库数量" width="100" />
      <el-table-column prop="pre_count" label="待入库数量" width="100" />
      <el-table-column prop="operate" label="操作" width="100">
        <template #default="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >入库</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <footer>
      <el-pagination
        v-model:currentPage="currentPage1"
        :page-size="11"
        layout="prev, pager, next, jumper"
        :total="100"
        @current-change="handleCurrentChange"
        background
      >
      </el-pagination>
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { mockInventory } from "../../assets/api/mock";

interface ChildType {
  order: number;
  code: number;
  time: string;
  type: string;
  sum: number;
  past_count: number;
  pre_count: number;
}

export default defineComponent({
  setup() {
    const tableData = ref<ChildType[]>([]);
    let page: any;
    const handleCurrentChange = async (val: number) => {
      const res = await mockInventory.getInventoryList(val, 11);
      tableData.value = res.result;
      page = val;
    };
    onMounted(async () => {
      const res = await mockInventory.getInventoryList(1, 11);
      tableData.value = res.result;
    });

    const handleDelete = async (i: number, row: ChildType) => {
      console.log(row);

      const res = await mockInventory.removeItem(row.order);

      if (res.status === 0) {
        const res = await mockInventory.getInventoryList(page, 11);
        tableData.value = res.result;
      }
    };

    return {
      tableData,
      currentPage1: ref(1),
      currentPage2: ref(2),
      currentPage3: ref(3),
      currentPage4: ref(4),
      handleCurrentChange,
      handleDelete,
    };
  },
});
</script>

<style lang="scss" scoped>
.ivt {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
  border-radius: 10px;
  header {
    width: 100%;
    line-height: 110px;
    text-align: center;
    font-weight: bolder;
    font-size: 22px;
  }
  footer {
    height: 116px;
    position: relative;
    background-color: #eeeeee;
  }
  ::v-deep .el-table th.el-table__cell {
    color: #fff;
    background-color: #62657e;
    font-size: 16px;
    text-align: center;
  }
  ::v-deep .el-table .cell {
    text-align: center;
    font-size: 16px;
  }
  .el-pagination {
    position: absolute;
    right: 30px;
    top: 45px;
  }
  .el-button {
    background-color: #2994fa;
    border-color: #2994fa;
  }
  ::v-deep .el-input {
    margin-top: 0;
  }
}
</style>
